<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script src="https://cdn.highcharts.com.cn/highcharts/themes/grid-light.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<!--        jQuery-->
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px"></div>

        <script type="text/javascript">

            // 定时刷新
            setInterval(function () {
                $(function(){
                    $.ajax({
                        type : 'post',
                        url: 'http://localhost:8080' + "/line/echarts",//调用后台接口获取折线图上的数据
                        dataType: "json",
                        success:function(result){
                            var dataList = result.dataList;//这个是Y轴的数据
                            var dateList = result.dateList;//这个是X轴的日期

                            //基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('container'));
                            option = {
                                tooltip: {
                                    // formatter: '{b0}<br />{a0}:{c0}<br />{a1}:{c1}%',
                                    trigger: 'axis',
                                    formatter: function (dataList) {
                                        var html;
                                        for(var i=0;i<dataList.length;i++){
                                            html = dataList[i].status+"%";//这里注意两个参数名不一样 data 和 date
                                        }
                                        return html;
                                    }
                                },
                                title: {
                                    text: '专注度'
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: [0, 0.01],
                                    data: result.dateList,
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                color:["#7CBBF0"],
                                series: [{
                                    //color: '#275F82', //改变区域颜色
                                    data: result.dataList,
                                    type: 'line',
                                    smooth: true,
                                    showAllSymbol : true,
                                    lineStyle:{  //折线图上线的颜色
                                        normal:{
                                            color:"#7CBBF0",
                                            width:3,
                                        },
                                    },
                                    // 显示数值，折线图上的点
                                    itemStyle : { normal: {label : {show: true}}}
                                }]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        }
                    })
                })
            },5000);


        </script>






    </body>
</html>